<template>
    <div>
      <button @click="increment">Count is: {{ count }}</button>
      <!-- 全局引入 -->
      <HelloWorld/>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, watch, watchEffect } from 'vue';
  
  const count = ref(0);
  
  const increment = () => {
    count.value++;
    state.count++;
    state.nestedProp.count++;
    state.message = 'Hello, Vue 3!';
  };
  
  const state = reactive({
    count: 0,
    message: 'Hello',
    nestedProp: {
      count: 0
    }
  });
  

  
  // watchEffect 是 Vue 3 提供的一种高级侦听器，用于监听响应式数据的变化并执行副作用函数。
  // 与 watch 的区别在于，watchEffect 不需要显式地指定要监听的数据源，而是自动追踪其内部使用
  // 的响应式数据，并在这些数据发生变化时重新运行副作用函数。这使得 watchEffect 更适合于仅需要执行副作用的情况，而不需显式关注特定的数据。
    watchEffect(() => {
     console.log(`Count is: ${state.count}, Message is: ${state.message}`);
    });


  watch(() => state.count, (newCount, oldCount) => {
    console.log(`count 从 ${oldCount} 变为 ${newCount}`);
  });
  
  watch(count, (newCount, oldCount) => {
    console.log(`count 从 ${oldCount} 变为 ${newCount}`);
  });
  
  watch(() => state.nestedProp, (newVal, oldVal) => {
    console.log('nestedProp 变化：', newVal);
  }, { deep: true ,immediate:true});


  </script>
  

